<style scoped>
  p{
    font-weight: 400;
  }
  .my-count{
    /*height:200px;*/
    background: linear-gradient(to right, #6379F8 0%,#91A5F8 100%);
  }
  .header{
    display: flex;
    flex-direction: column;
  }
  .head-top{
    width:100%;
    height:10px;
    background: transparent;
  }
  head{
    height:50px;
    /*border-bottom: 2px solid #dedde3;*/
    display: flex;
    justify-content: center;
    align-items:center;
  }
  .head-left{
    position: absolute;
    width:40px;
    height:100%;
    left:0;
    top:0;
    color: #7f7a8e;
    text-align: center;
  }
  .head-left h1{
    margin-top: 22px;
  }
  .head-left>h1{
    color: #ffffff;
  }
  .head-right>h1{
    color: #ffffff;
  }
  .head-middle>h3{
    color: #ffffff;
  }
  .head-right{
    position: absolute;
    right:10px;
    top:15px;
    height:40px;
  }
  .count-middle{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .count-middle img{
    display: block;
    width:100px;
    height:100px;
  }
  .count-middle>p{
    color: #ffffff;
    margin-top: 10px;
  }
  .count-btn{
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .count-btn button{
    border: 1px solid #ffffff;
    background: transparent;
    color: #ffffff;
    padding: 4px 16px 2px 16px;
    border-radius: 14px;
  }
  .count-btn button p{
    color: #ffffff;
  }
  .count-btn button:last-child{
    margin-left: 4px;
  }
  .list{
    margin-left: 10px;
  }
  .list ul li{
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #E9E9E9;
    color: #555555;
    justify-content: center;
    align-items: center;
  }
  .list ul li h2{
    margin-right: 8px;
    color: #555555;
  }
  .list ul li i{
    flex: 1;
  }
  .list ul li i.last{
    margin-right: 10px;
  }
  .list ul li p{
    margin-left: 10px;
    flex: 8;
  }
</style>

<template>
  <div class="count">
    <div class="my-count">
      <!--<div class="header">-->
        <!--<div class="head-top"></div>-->
        <div class="head">
          <div class="head-left" @click="goBack()">
            <h1 class="iconfont icon-xiangzuo1"></h1>
          </div>
          <div class="head-middle"><h3>我的账户</h3></div>
          <div class="head-right">
            <h1 class="iconfont icon-gengduo"></h1>
          </div>
        </div>
      <!--</div>-->

      <div class="count-middle">
        <img src="" alt="">
        <p>dasfdsfad@qq.com</p>
        <div class="count-btn">
          <button><router-link to="/open"><p>立即开户</p></router-link></button>
          <button><p>绑定证券用户</p></button>
        </div>
      </div>
    </div>
    <div class="list">
      <ul>
    <my-footer></my-footer>
  </div>
        <li><h3 class="first iconfont icon-fangyu" style="color: #5e77f9;"></h3><p>风险等级</p><h4>(未进行风险评级)</h4><h2 class="iconfont icon-xiangyou1"></h2></li>
        <li><h3 class="first iconfont icon-suo1" style="color: #6e84f7;"></h3><p>账号与安全</p><h2 class="iconfont icon-xiangyou1"></h2></li>
        <li><h3 class="first iconfont icon-bangzhu" style="color: #7b90f8;"></h3><p>帮助中心</p><h2 class="iconfont icon-xiangyou1"></h2></li>
        <li><h3 class="first iconfont icon-fankui" style="color: #7f94f7;"></h3><p>意见反馈</p><h2 class="iconfont icon-xiangyou1"></h2></li>
        <li><h3 class="first iconfont icon-kefu" style="color: #90a4f7;"></h3><p>联系客服</p><h2 class="iconfont icon-xiangyou1"></h2></li>
        <li><h3 class="first iconfont icon-banbenhao" style="color: #A0b1f7;"></h3><p>版本号</p><h2 class="iconfont icon-xiangyou1"></h2></li>
      </ul>
    </div>

</template>

<script>
  import myFooter from '../components/footer.vue'

  export default {
    	components: {
      myFooter
    },
    methods: {
      goBack () {
        this.$router.go(-1)
      }
    }
  }
</script>
